<template>
    <a-row :gutter="10">
        <!--左边表格-->
        <a-col :md="leftColMd" :sm="24" style="margin-bottom: 20px">
            <a-card :bordered="false">
                <!-- 查询区域 -->
                <div class="table-page-search-wrapper">
                    <!--搜索区域-->
                    <a-form layout="inline" @keyup.enter.native="searchQuery">
                        <a-row :gutter="24">
                            <!--查询条件-->
                            <a-col :md="12" :sm="8">
                                <a-form-item label="机构名称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                                    <a-input v-model="queryParam.customerName" placeholder="机构名称"/>
                                </a-form-item>
                            </a-col>

                            <a-col :md="12" :sm="24">
                                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                                    <a-button type="primary" @click="searchQuery" icon="search"
                                              style="margin-left: 21px">查询</a-button>
                                    <a-button type="primary" @click="searchReset" icon="reload"
                                              style="margin-left: 8px">重置</a-button>
                                </span>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <!-- 查询区域-END -->

                <!-- table区域-begin -->
                <div>
                    <!--
                        表单配置项：dataSource(数据源) scroll(控制table的滚动) rowKey(每一行定义一个单独的key) columns(表头)
                                   pagination(页脚) loading(页面是否加载中)  @change(分页、排序、筛选变化时触发的change事件)
                                   rowSelection(列表项是否可选择):selectedRowKeys指定选中项的 key 数组，需要和 onChange 进行配合
                                   onChange选中项发生变化时的回调
                    -->
                    <a-table
                            ref="table"
                            size="middle"
                            :scroll="{x:true}"
                            bordered
                            rowKey="id"
                            :columns="columns"
                            :dataSource="dataSource"
                            :pagination="ipagination"
                            :loading="loading"
                            :rowSelection="{selectedRowKeys: selectedRowKeys1, onChange: onSelectChange1, type:'radio'}"
                            class="j-table-force-nowrap"
                            @change="handleTableChange">

                        <span slot="action" slot-scope="text, record">
                            <a @click="handleOpen(record) ">详情</a>
                        </span>

                        <span slot="testSlot" slot-scope="text, record">
                            <a style="font-weight: bolder;color: red;">{{text}}</a>
                        </span>

                    </a-table>
                </div>
            </a-card>
        </a-col>

        <!--右边表格-->
        <a-col :md="rightColMd" :sm="24" v-if="this.rightcolval == 1">
            <a-card :bordered="false">
                <div style="text-align: right;">
                    <a-icon type="close-circle" @click="hideUserList"/>
                </div>
                <!-- 查询区域 -->
                <div class="table-page-search-wrapper">
                    <h2 class="text-center" style="margin-top: -20px">【{{customerName}}】医废提交数据</h2>
                    <a-form layout="inline">
                        <a-row :gutter="24">
                            <a-col :md="12" :sm="12">
                                <a-form-item label="月份">
                                    <a-month-picker placeholder="" v-model="queryParam2.creatTimeBegin" format="yyyy-MM"
                                                    :allowClear="false" @change="changeMonth"/>
                                    <!--allowClear控制按钮取消的显示-->
                                    <a-button type="primary" @click="searchQuery2" icon="search"
                                              style="margin-left: 10px">查询
                                    </a-button>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>

                <div>
                    <a-table
                            style="height:500px"
                            ref="table2"
                            bordered
                            size="middle"
                            rowKey="id"
                            :columns="columns2"
                            :dataSource="dataSource2"
                            :pagination="ipagination2"
                            :loading="loading2"
                            @change="handleTableChange2"
                    >
                        <span slot="action" slot-scope="text, record">
                            <a style="font-weight:600;color:#0082F5;text-decoration:underline;"
                               @click="openInfo(record)">
                                {{text}}
                            </a>
                        </span>

                    </a-table>
                </div>
                <jg-recycle-day-data-form ref="openInfo"></jg-recycle-day-data-form>
            </a-card>
        </a-col>

    </a-row>
</template>
<script>
    import { JeecgListMixin } from '@/mixins/JeecgListMixin'
    import { mixinDevice } from '@/utils/mixin'
    import { getAction } from '@/api/manage'
    import { filterObj } from '@/utils/util'

    import moment from 'moment'
    import JgRecycleDayDataForm from './modules/JgRecycleDayDataForm'

    export default {
        mixins: [JeecgListMixin, mixinDevice],
        components: {
            moment,
            JgRecycleDayDataForm
        },
        data() {
            let that = this
            return {
                model1: {},
                model2: {},
                currentCustomerNumber: '',
                queryParam1: {},
                queryParam2: {},
                dataSource1: [],
                dataSource2: [],
                // 右边表格分页
                ipagination2: {
                    current: 1, // 当前页
                    pageSize: 10, // 一页的数据限制
                    pageSizeOptions: ['10', '20', '30'], // 指定每页能够显示多少条
                    // 能够展现总数
                    showTotal: (total, range) => {
                        return range[0] + '-' + range[1] + ' 共' + total + '条'
                    },
                    // 是否能够快速跳转至某页
                    showQuickJumper: true,
                    // 是否能够改变 pageSize
                    showSizeChanger: true,
                    // 总数
                    total: 0
                },
                isorter1: {
                    column: 'time',
                    order: 'desc'
                },
                isorter2: {
                    column: 'time',
                    order: 'desc'
                },
                filters1: {},
                filters2: {},
                loading2: false,
                selectedRowKeys1: [],
                selectionRows1: [],
                selectionRows2: [],
                test: {},

                rightcolval: 0,
                // 表1数据
                columns:
                    [
                        {
                            title: '机构名称', // 该列展现的title
                            align: 'center',
                            dataIndex: 'customerName' // 对应标志，与dataSource中数据匹配的标识符
                        },
                        {
                            title: '机构类型',
                            align: 'center',
                            dataIndex: 'organizationLevel',
                            scopedSlots: { customRender: 'htmlSlot' }, // customRender 对应table中的插槽名，能够在每行自定义展现的内容，
                            customRender: function(value, row, index) {
                                const obj = {
                                    children: ' ',
                                    attrs: {}
                                }
                                let info = that.$config.getOrgLevel(value)
                                if (info) {
                                    if (value == 0) {
                                        obj['children'] =
                                    <
                                        span
                                        style = 'color:#05f305;' > { info['label'] } < /span>
                                    } else if (value == 1) {
                                        obj['children'] =
                                    <
                                        span
                                        style = 'color:#1675d6;' > { info['label'] } < /span>
                                    } else if (value == 2) {
                                        obj['children'] =
                                    <
                                        span
                                        style = 'color:orange;' > { info['label'] } < /span>
                                    } else if (value == 3) {
                                        obj['children'] =
                                    <
                                        span
                                        style = 'color:#d42c05;' > { info['label'] } < /span>
                                    }
                                }
                                return obj
                            }
                        },
                        {
                            title: '监管类别',
                            align: 'center',
                            dataIndex: 'organizationSupervise',
                            scopedSlots: { customRender: 'htmlSlot' },
                            customRender: function(value, row, index) {
                                const obj = {
                                    children: ' ',
                                    attrs: {}
                                }
                                let info = that.$config.getOrgSupervise(value)
                                if (info) {
                                    if (value == 0) {
                                        obj['children'] =
                                    <
                                        span
                                        style = 'color:#05f305;' > { info['label'] } < /span>
                                    } else if (value == 1) {
                                        obj['children'] =
                                    <
                                        span
                                        style = 'color:#1675d6;' > { info['label'] } < /span>
                                    } else if (value == 2) {
                                        obj['children'] =
                                    <
                                        span
                                        style = 'color:orange;' > { info['label'] } < /span>
                                    }
                                }
                                return obj
                            }
                        },
                        {
                            title: '日台账',
                            dataIndex: 'action',
                            align: 'center',
                            width: 147,
                            scopedSlots: { customRender: 'action' }
                        }
                    ],
                columns2: [
                    {
                        title: '序号',
                        dataIndex: '',
                        key: 'rowIndex',
                        width: 60,
                        align: 'center',
                        scopedSlots: { customRender: 'htmlSlot' },
                        customRender: (text, row, index) => {
                            const obj = {
                                children: parseInt(index) + 1,
                                attrs: {}
                            }
                            if (row.colSpan) {
                                obj.children = <div style = 'color:red;font-weight:600;' > 合计 </div>
                                obj.attrs.colSpan = row.colSpan;
                            }
                            return obj
                        }
                    },
                    {
                        title: `收运日期`,
                        dataIndex: 'time',
                        key: `time`,
                        width: 100,
                        align: 'center',
                        scopedSlots: { customRender: 'action' },
                        customRender: (text, row, index) => {
                            const obj = {
                                children: < div style = 'font-weight:600;color:#fff;text-decoration:underline;cursor:pointer;'
                            onclick = {()  => this.openInfo(row) } >{{text}}</div>,
                            attrs: {}
                        }
                            if (row.colSpan) {
                                obj.children =
                            <div style = 'color:red;font-weight:600;' > text || 0 </div>
                                obj.attrs.colSpan = 0
                            }
                            return obj
                        }
                    },
                    {
                        title: `感染性(kg)`,
                        dataIndex: 'infectiousWeight',
                        key: `infectiousWeight`,
                        customRender: (value, row, index) => {
                            const obj = {
                                children: value || '',
                                attrs: {}
                            }
                            if (row.colSpan) {
                                obj.children =
                            <
                                div
                                style = 'color:red;font-weight:600;' > { value || 0
                            }<
                                /div>
                                obj.attrs.colSpan = 1
                            }
                            return obj
                        }
                    },
                    {
                        title: `损伤性(kg)`,
                        dataIndex: 'traumaticWeight',
                        key: `traumaticWeight`,
                        customRender: (value, row, index) => {
                            const obj = {
                                children: value || '',
                                attrs: {}
                            }
                            if (row.colSpan) {
                                obj.children =
                            <
                                div
                                style = 'color:red;font-weight:600;' > { value || 0
                            }<
                                /div>
                                obj.attrs.colSpan = 1
                            }
                            return obj
                        }
                    },
                    {
                        title: `病理性(kg)`,
                        dataIndex: 'pathologicalWeight',
                        key: `pathologicalWeight`,
                        customRender: (value, row, index) => {
                            const obj = {
                                children: value || '',
                                attrs: {}
                            }
                            if (row.colSpan) {
                                obj.children =
                            <
                                div
                                style = 'color:red;font-weight:600;' > { value || 0
                            }<
                                /div>
                                obj.attrs.colSpan = 1
                            }
                            return obj
                        }
                    },
                    {
                        title: `药物性(kg)`,
                        dataIndex: 'medicatedWeight',
                        key: `medicatedWeight`,
                        customRender: (value, row, index) => {
                            const obj = {
                                children: value || '',
                                attrs: {}
                            }
                            if (row.colSpan) {
                                obj.children =
                            <
                                div
                                style = 'color:red;font-weight:600;' > { value || 0
                            }<
                                /div>
                                obj.attrs.colSpan = 1
                            }
                            return obj
                        }
                    },
                    {
                        title: `化学性(kg)`,
                        dataIndex: 'chemicalWeight',
                        key: `chemicalWeight`,
                        customRender: (value, row, index) => {
                            const obj = {
                                children: value || '',
                                attrs: {}
                            }
                            if (row.colSpan) {
                                obj.children =
                            <
                                div
                                style = 'color:red;font-weight:600;' > { value || 0
                            }<
                                /div>
                                obj.attrs.colSpan = 1
                            }
                            return obj
                        }
                    },
                    {
                        title: `合计(kg)`,
                        dataIndex: 'sum',
                        key: `sum`,
                        customRender: (value, row, index) => {
                            const obj = {
                                children: value || '',
                                attrs: {}
                            }
                            if (row.colSpan) {
                                obj.children =
                            <
                                div
                                style = 'color:red;font-weight:600;' > { value || 0
                            }<
                                /div>
                                obj.attrs.colSpan = 1
                            }
                            return obj
                        }
                    }],

                // 高级查询参数
                superQueryParams2: '',
                // 高级查询拼接条件
                superQueryMatchType2: 'and',
                // 请求后台接口路径
                url: {
                    list: '/hc/Regulatory/regulatoryQuery', // 小董接口,查询机构列表
                    list2: '/hc/Regulatory/getMonthAndDay' // 小董接口,按月-天查询医院数据(默认当前月)

                },
                customerName: '',

            }
        },
        created() {
            // let params = this.$route.query;
            // if(params){
            //     this.customerData = params;
            //     console.log('params ==> ',params)
            // }
        },
        computed: {
            // 判断左右两边表格的长度
            leftColMd() {
                return this.selectedRowKeys1.length === 0 ? 24 : 12
            },
            rightColMd() {
                return this.selectedRowKeys1.length === 0 ? 0 : 12
            }
        },
        methods: {
            changeMonth: function(e) {
                if (e) {
                    this.queryParam2.creatTimeBegin = moment(e).format('yyyy-MM')
                    this.loadData2()
                } else {
                    this.queryParam2.creatTimeBegin = ''
                }
            },
            onSelectChange1(selectedRowKeys, selectionRows) {
                this.rightcolval = 1
                this.selectedRowKeys1 = selectedRowKeys
                this.selectionRows1 = selectionRows
                this.model1 = Object.assign({}, selectionRows[0])
                this.currentCustomerNumber = selectionRows[0].customerNumber
                this.customerName = selectionRows[0].customerName
                this.loadData2()
            },
            // 加载数据源
            loadData2(arg) {
                if (!this.url.list2) {
                    this.$message.error('请设置url.list2属性!')
                    return
                }
                //加载数据 若传入参数1则加载第一页的内容
                if (arg === 1) {
                    this.ipagination2.current = 1
                }
                if (this.currentCustomerNumber === '') return
                let params = this.getQueryParams2()//查询条件
                params.customerNumber = this.currentCustomerNumber
                this.loading2 = true
                getAction(this.url.list2, params).then((res) => {
                    if (res.success) {
                        this.dataSource2 = res.result.dayStatisticsByMonth || []
                        this.dataSource2.push({
                            colSpan: 2,
                            infectiousWeight: res.result['sumInfectiousWeight'] || 0,
                            traumaticWeight: res.result['sumTraumaticWeight'] || 0,
                            pathologicalWeight: res.result['sumPathologicalWeight'] || 0,
                            medicatedWeight: res.result['sumMedicatedWeight'] || 0,
                            chemicalWeight: res.result['sumChemicalWeight'] || 0,
                            sum: res.result.totals || 0
                        })
                        //当前查询条件下所有的记录数量
                        this.ipagination2.total = res.result.total
                    }

                    this.loading2 = false
                })

            },

            getQueryParams2() {
                //获取查询条件
                let sqp = {}
                if (this.superQueryParams2) {
                    sqp['superQueryParams'] = encodeURI(this.superQueryParams2)
                    sqp['superQueryMatchType'] = this.superQueryMatchType2
                }
                // 格式化时间
                this.queryParam2.creatTimeBegin = moment(this.queryParam2.creatTimeBegin).format('yyyy-MM')
                var param = Object.assign(sqp, this.queryParam2, this.isorter2, this.filters2)
                param.field = this.getQueryField2()
                param.pageNo = this.ipagination2.current
                param.pageSize = this.ipagination2.pageSize
                return filterObj(param)

            },

            getQueryField2() {
                //TODO 字段权限控制
                var str = 'id'
                this.columns2.forEach(function(value) {
                    str += ',' + value.dataIndex
                })
                return str
            },

            onClearSelected1() {
                this.selectedRowKeys1 = []
                this.selectionRows1 = []
            },
            onClearSelected2() {
                this.selectionRows2 = []
            },

            // 打开详情的方法
            handleOpen(record) {
                this.rightcolval = 1
                this.customerName = record.customerName
                this.selectedRowKeys1 = [record.customerNumber]
                this.model1 = Object.assign({}, record)
                this.currentCustomerNumber = record.customerNumber
                this.onClearSelected2()
                this.loadData2()
            },

            searchQuery2() {
                this.loadData2(1)
            },

            // searchReset2() {
            //     this.queryParam2 = {}
            //     this.loadData2(1)
            // },

            handleTableChange2(pagination, filters, sorter) {
                //分页、排序、筛选变化时触发
                //TODO 筛选
                if (Object.keys(sorter).length > 0) {
                    this.isorter2.column = sorter.field
                    this.isorter2.order = 'ascend' == sorter.order ? 'asc' : 'desc'
                }
                this.ipagination2 = pagination
                this.loadData2()
            },

            hideUserList() {
                //this.rightcolval = 0
                this.selectedRowKeys1 = []
            },

            //点击日期跳转到详情的方法
            openInfo: function(cus, customerNumber, customerName) {
                let ref = this.$refs.openInfo
                customerNumber = this.currentCustomerNumber
                customerName = this.customerName
                if (ref) {
                    ref.show(cus, customerNumber, customerName)
                }
            }
        }
    }
</script>
<style scoped>
    /** Button按钮间距 */
    .ant-btn {
        margin-left: 8px
    }
</style>
